<template>
	<view>
		<view class="box-top"  v-for="(item,index) in dataArray" :key="index">
			<view class="left-box-top">{{item.time}}</view> <!-- 左边 -->
			
			<view class="line"><!-- 中线 -->
				<view class="dash"></view>
				<view class="dot" :class="{active:item.active}"></view> <!-- 圆点 -->
			</view>
			
			<view class="right-box-top"> <!-- 右边 -->
				<view>{{item.title}}</view>
				<view style="font-size: 12px; color: #B1B8C7;">{{item.content}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			dataArray:{
				type:Array
			}
		},
		data() {
			return {
			}
		},
		mounted(){
		},
		methods: {
		}
	}
</script>

<style scoped="scoped" lang="less">
.box-top{
	width: 100%;
	min-height: 120rpx;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	.left-box-top{
		width: 100rpx;
		text-align: center;
		color: rgba(177,184,199,1);
		font-size: 28rpx;
	}
	.line{
		width: 2rpx;	
		// background-color: rgba(228,231,237,1);
		margin: 0 20rpx 0 20rpx;
		position: relative;
		
		.dash {
			height: 100%;
			border-left: 2rpx dashed #B1B8C7;
			position: absolute;
			top: 8rpx;
		}
		.dot{
			width: 14rpx;
			height: 14rpx;
			background-color: rgba(228,231,237,1);
			box-shadow: 0 0 1px 1px rgba(228,231,237, 0.7);
			border-radius: 50%;
			position: absolute;
			left: -6rpx;
			top: 8rpx;
		}
	}
	.right-box-top{
		flex: 1;
		padding: 0 0 20rpx 20rpx;
	}
}
//激活元素
.active{
	background-color: rgba(54,179,101,1) !important;
	box-shadow: 0 0 1px 1px rgba(54,179,101, 0.7) !important;
}
// 隐藏元素
.none{
	background-color: rgba(0,0,0,0) !important;
}
</style>
 
